<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jerry Qu's HTML document</title>
    <meta http-equiv="Pragma" content="no-cache" />  
    <meta http-equiv="Cache-Control" content="no-cache" />     
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="ImageToolbar" content="no" />
	<script type="text/javascript" src="main.js"></script>
    <style type="text/css" title="default" media="screen">
    /*<![CDATA[*/

    /*]]>*/
    </style>
    </head>
	<body>
		<h3>点击方块</h3>
		<div id="test1" style="cursor:pointer;width:50px;height:50px;background-color:#ccc;border:#333"></div>
		<div style="height:2647px;background:url(img/bg.png) no-repeat"></div>
		<div id="test2" style="cursor:pointer;width:50px;height:50px;background-color:#ccc;border:#333"></div>
		<script type="text/javascript">
			//anim3Scroll
			var Anim = QW.ElAnim,
				Dom = QW.Dom,
				NodeW = QW.NodeW,
				$ = Dom.g,
				$$ = NodeW;
			window.onload = function(){
				var doc = (QW.Browser.firefox || QW.Browser.ie) ? document.documentElement : document.body;

				//addEventlistener
				$("test1").onclick = function(){
					var pos = Dom.getDocRect();

					var anim1 = new Anim(doc, {
						"scrollTop" : {
							to : pos.scrollHeight - pos.height
						}
					}, 2000, Anim.Easing.easeBothStrong);

					anim1.start();
				};
				$("test2").onclick = function(){
					var anim2 = new Anim(doc, {
						"scrollTop" : {
							to : 0
						}
					}, 2000, Anim.Easing.easeBothStrong);

					anim2.start();
				};
			};
		</script>
	</body>
</html>
